<template>
  <div>
    <van-cell
      :to="{
        name: 'article',
        params: {
          articleId: article.art_id,
        },
      }"
    >
      <!-- 通过cell单元格组件将整个文章显示页进行划分 -->
      <div
        slot="title"
        style="
          font-size: 16px;
          font-weight: bold;
          width: 230px;
          margin-bottom: 10px;
        "
        class="van-ellipsis"
      >
        {{ article.title }}
      </div>
      <div slot="label" style="position: relative; bottom: 0">
        <!-- 三张封面图的情况 -->
        <div v-if="article.cover.type === 3" class="imgCon">
          <van-image
            height="73"
            fit="cover"
            :src="article.cover.images[0]"
          /><van-image
            height="73"
            fit="cover"
            :src="article.cover.images[1]"
          /><van-image height="73" fit="cover" :src="article.cover.images[2]" />
        </div>
        <div class="textCon">
          <span v-if="article.is_top === 1" style="color: red">置顶 </span>
          <!-- 时间使用，使用dayjs -->
          <span>{{ article.aut_name }} </span>
          <span>{{ article.like_count }}评论</span>
          <span>{{ article.pubdate | relativeTime }}</span>
        </div>
      </div>
      <!-- 1张封面图片的情况 -->
      <van-image
        v-if="article.cover.type === 1"
        width="116"
        height="73"
        fit="cover"
        :src="article.cover.images[0]"
      />
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'Article',
  props: {
    article: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped lang="less">
.imgCon {
  display: flex;
  .van-image {
    flex: 1;
  }
}
.van-cell__title {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  span {
    padding: 0 3px;
  }
}
</style>
